import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
<template>
  <div>
    关于汽车组件
    <h1>{{$store.state.cartStore.price}}</h1>
    <hr>
    <h1>state:{{price}}</h1>
    <h1>getters:{{priceGetters}}</h1>
    <hr>
    <button @click="change">触发mutations 触发</button>
    <button @click="changeActions">触发actions 触发</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: "cars",
  computed: {
    ...mapState("cartStore", ["price"]),
    ...mapGetters("cartStore", ["priceGetters"]),
  },
  methods: {
    ...mapMutations("cartStore", ["changePrice"]),
    ...mapActions("cartStore", ["priceActions"]),
    change () {
      // this.$store.commit("changePrice", 9999)
      this.changePrice(9999)
    },
    changeActions () {
      // this.$store.dispatch("priceActions", 10000)
      this.priceActions(10000)
    }
  },
}
</script>
<style lang="less">
</style>